<template>
	<view class="container">
		<!-- F1: 搜索模块 -->
		<view class="f1">
			<view @click="goSearch" class="search">
				<input disabled type="text" placeholder="搜索歌曲 / 专辑">
				<image src="/static/img/index/search.png" mode="widthFix" />
			</view>
			<image src="../../static/img/index/icon1.png" mode="widthFix" />
			<image src="../../static/img/index/icon2.png" mode="widthFix" />
		</view>
		<!-- F2: 轮播图 -->
		<view class="f2">
			<swiper
			class="f2-banner"
			indicator-color="#fff" 
			indicator-active-color="#ffbe5a" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000"
			circular
			>
				<swiper-item v-for="(b,i) in banner" :key="i" class="banner">
					<image :src="b.pic" mode="widthFix" />
				</swiper-item>
			</swiper>
		</view>
		<!-- F3: 推荐 -->
		<view class="f3">
			<view class="grid-list">
				<view class="img">
					<image src="../../static/img/index/redu.png" mode="widthFix" />
				</view>
				<text>推荐</text>
			</view>
			<view class="grid-list">
				<view class="img">
					<image src="../../static/img/index/changge.png" mode="widthFix" />
				</view>
				<text>最新</text>
			</view>
			<view class="grid-list">
				<view class="img">
					<image src="../../static/img/index/yinyue.png" mode="widthFix" />
				</view>
				<text>专辑</text>
			</view>
			<view class="grid-list"  @click="singer">
				<view class="img">
					<image src="../../static/img/index/fensi.png" mode="widthFix" />
				</view>
				<text>歌手</text>
			</view>
		</view>
		<!-- F4: 最新歌曲 -->
		<view class="f4">
			<view class="f4-top">
				<text class="f4-top-left">最新歌曲</text>
				<text class="f4-top-right">更多</text>
			</view>
			<view class="bom">
				<!-- scroll-view中如果有多个元素, 默认一定会换行; 如果只有一个元素, 则可以水平滚动 -->
				<scroll-view v-for="{name, picUrl, id} in gequ" :key="id" scroll-x>
					<!-- TODO: 此处的"推荐"应该从服务器端接口中异步请求 -->
					<view class="suggest-list">
						<view class="suggest">
							<image :src="picUrl" mode="heightFix" />
							<text>{{name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>	
		</view>
		<!-- F5: 推荐新歌曲 -->
		<view class="f4 f5">
			<view class="f4-top">
				<text class="f4-top-left">推荐新歌曲</text>
				<text class="f4-top-right">更多</text>
			</view>
			 <view class="bom">
				<!-- scroll-view中如果有多个元素, 默认一定会换行; 如果只有一个元素, 则可以水平滚动 -->
				<scroll-view v-for="{name, picUrl, id} in music" :key="id"  scroll-x>
					<!-- TODO: 此处的"推荐"应该从服务器端接口中异步请求 -->
					<view class="suggest-list">
						<view class="suggest">
							<image :src="picUrl" mode="widthFix" />
							<text>{{name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- F6: 热门歌手 -->
		<view class="f4 f6">
			<view class="f4-top">
				<text class="f4-top-left">热门歌手</text>
				<text class="f4-top-right" @click="singer">更多</text>
			</view>
			 <view class="bom">
				<!-- scroll-view中如果有多个元素, 默认一定会换行; 如果只有一个元素, 则可以水平滚动 -->
				<scroll-view v-for="({name, picUrl, id}, i) in artists" :key="i"  scroll-x>
					<!-- TODO: 此处的"推荐"应该从服务器端接口中异步请求 -->
					<view class="suggest-list">
						<view @click="singerDetail(name, id)" class="suggest">
							<image :src="picUrl" mode="heightFix" />
							<text>{{name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- F7: 返回顶部 -->
		<lgGoTop />
	</view>
</template>

<script>
	import {homePage, personalized,base,personalizedNewsong,topArtists} from '@/service'
	export default {
		data() {
			return {
				gequ: [],
				base,
				music: [],
				banner: [],
				artists: [],
			}
		},
		methods: {
			singerDetail(singerName, singerId){
				uni.navigateTo({
					url: `/pages/singer/singer?singerName=${singerName}&singerId=${singerId}`
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			singer(){
				uni.navigateTo({
					url: '/pages/indexsinger/indexsinger'
				})
			},
		},
		async onLoad() {
			let data = await homePage()
			// console.log('data:',data[0].extInfo.banners)
			this.banner = data[0].extInfo.banners
			let gequ = await personalized()
			// console.log('gequ:', gequ)
			this.gequ = gequ
			let music = await personalizedNewsong()
			// console.log('music:', music)
			this.music = music
			let artists = await topArtists()
			console.log('artists:', artists)
			this.artists = artists
		},
	}
</script>

<style lang="scss">
.container{
	background-image: linear-gradient(180deg, $uni-color-primary 100rpx, $uni-bg-color 400rpx);
}
.f1{
	flex-direction: row;
	align-items: center;
	// justify-content: space-around;
	margin-top: $uni-spacing-col-lg * 2.5;
	padding-left: $uni-spacing-row-base;
	padding-right: $uni-spacing-row-lg * 1.2;
	margin-bottom: $uni-spacing-col-lg * 1;
	.search{
		position: relative;
		flex: 1;
		input{
			background-color: $uni-bg-color;
			height: 70rpx;
			padding-left: $uni-spacing-row-lg * 3;
			border-radius: 200px;
		}
		input::placeholder{
			color: #666;
		}
		image{
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			width: $uni-font-size-title;
		}
	}
	>image{
		width: $uni-font-size-title * 1.2;
		margin-left: $uni-spacing-row-lg * 1.2;
	}
}
.f2{
	.f2-banner{
		flex-direction: row;
	}
	.banner{
		width: 100%;
		image{
			width: 100%;
			border-radius: $uni-border-radius-lg;
		}
	}
	::v-deep uni-swiper .uni-swiper-dots-horizontal {
		bottom: 10px;
	    left: 80%;
	}
}
.f3 {
	flex-direction: row;
	justify-content: space-around;
	margin-top: $uni-spacing-col-lg;
	.grid-list{
		align-items: center;
		.img{
			width: 116rpx;
			height: 116rpx;
			border-radius: $uni-border-radius-circle;
			box-shadow: 0 0 10px 7px #f2f2f2;
			justify-content: center;
			align-items: center;
			image{
				width: $uni-font-size-title*1.4;
				
			}
		}
		text{
			margin-top: $uni-spacing-col-lg;
			color: #333;
		}
	}
}
.f4{
	margin-top: $uni-spacing-col-lg+10px;
	padding: 0 $uni-spacing-row-lg;
	.f4-top{
		margin-bottom: $uni-spacing-col-base;
		flex-direction: row;
		justify-content: space-between;
		.f4-top-left{
			font-size: $uni-font-size-lg+4px;
			font-weight: bold;
			letter-spacing: 2px;
		}
		.f4-top-right{
			padding: $uni-spacing-col-sm $uni-spacing-row-lg;
			border: 1px solid #efefef;
			border-radius: 200px;
		}
	}
}
.bom{
	flex-direction: row;
	overflow: auto;
}
.suggest-list{		
	// flex-direction: row;	
	// flex-wrap: nowrap;
	
	.suggest{
		width: 260rpx;
		flex-shrink: 0;
		flex: 1;
		margin-right: $uni-spacing-col-base;
		image{
			height: 240rpx;
			background-size: cover;
			border-radius: $uni-border-radius-lg;
		}
		text{
			margin-top: $uni-spacing-col-base;
			font-weight: bold;
			color: #666;
			letter-spacing: 1px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}
/deep/.uni-scroll-view ::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
	/deep/::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
.f5 .suggest-list>.suggest>image{
	width: 240rpx;
}
.f6 .suggest-list>.suggest{
		text-align: center;
		align-items: center;
		justify-content: center;
	image{
		height: 210rpx;
	}
	text{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

</style>

